<template>
    <div class="common-list">
        <div v-for="item in items" :key="item" class="item">
            <input :type="type" :id="item" :value="item" v-model="internalValue" @change="handleChange">
            <span class="checkbox-label"></span> <!-- 添加一个占位的 span -->
            <label :for="item" class="label-after-checkbox">{{ item }}</label> <!-- 将标签放在 span 后面 -->
        </div>
    </div>
</template>


<script>
export default {
    name: 'register',
    props: {
        items: {
            type: Array,
            required: true,
        },
        value: {
            type: Array,
            default: () => [],
        },
        type: {
            type: String,
            default: 'checkbox',
        },
    },
    emits: ['update:value'],
    data() {
        return {
            internalValue: this.value.slice(), // 使用数组的 slice 方法来深拷贝
        };
    },
    methods: {
        handleChange(event) {
            const itemValue = event.target.value;
            const checked = event.target.checked;

            if (checked) {
                // 如果是复选框，添加值到数组中
                this.internalValue.push(itemValue);
            } else {
                // 否则，从数组中移除值
                this.internalValue.splice(this.internalValue.indexOf(itemValue), 1);
            }

            // 通过 emit 更新父组件绑定的 v-model 值
            this.$emit('update:value', this.internalValue);
        },
    },
    watch: {
        value: {
            immediate: true,
            handler(newValue) {
                this.internalValue = newValue.slice(); // 同样使用 slice 方法来深拷贝
            },
        },
    },
};
</script>

<style scoped>
.common-list {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  justify-content: space-between; /* 使元素在行内均匀分布 */
}
.common-list .item {
  display: flex;
  align-items: center; /* 垂直居中 */
  width: calc(20% - 10px); /* 假设有 20px 的间距，每个元素占可用空间的 20% - 5% */
  margin-right: 10px; /* 右边距 */
  margin-bottom: 10px;
}

.common-list .item input {

    vertical-align: middle; /* 确保复选框在行内块元素中垂直居中 */
}

.common-list .item .checkbox-label {
    display: inline-block;
    width: 1px; /* 占位 span 的宽度，确保标签不会太靠近复选框 */
    height: 16px;
    vertical-align: middle;
    margin-right: 0px; /* 占位 span 和标签文本的间距 */
}
.common-list .item:nth-child(5n) {
  margin-right: 0;
}

.common-list .item input {
  margin-right: 5px; /* 输入框和标签文本的间距 */
  vertical-align: middle;
}

.common-list .item .checkbox-label {
  display: none; /* 隐藏占位 span，因为我们不需要它 */
}

.common-list .item .label-after-checkbox {

}
</style>